<template>
  <view class="hospital-detail">
    <view class="container" v-if="hospitalDetail.id != null">
      <!-- 封面 -->
      <view class="cover">
        <img :src="baseUrl + hospitalDetail.img" alt="" />
      </view>

      <!-- 医院信息 -->
      <view class="info-box">
        <view class="hospital-name">{{ hospitalDetail.hospital_name }}</view>
        <view class="hospital-grade">{{ hospitalDetail.hospital_grade }}</view>
        <view class="flex-box">
          <view class="hospital-info">
            <view class="hospital-property">
              <span class="hint">性质:</span>
              <span>{{ hospitalDetail.hospital_property }}</span>
            </view>

            <view class="hospital-phone">
              <span class="hint">联系电话:</span>
              <span>{{ hospitalDetail.hospital_phone }}</span>
            </view>
            <view class="hospital_address">
              <span class="hint">地址:</span>
              <span>{{ hospitalDetail.hospital_address }}</span>
            </view>
          </view>
          <view class="rate-box">
            <view class="rate-title">医院评分</view>
            <u-rate :value="hospitalDetail.hospital_score" readonly></u-rate>
          </view>
        </view>
      </view>

      <u-tabs
        :list="navList"
        lineWidth="30"
        lineColor="rgb(54, 216, 95)"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
        @change="changeNav"
      >
      </u-tabs>
      <!-- 医院介绍 -->
      <view v-if="navIndex == 0" class="hospital-introduce">
        {{ hospitalDetail.hospital_introduce }}
      </view>
      <!-- 科室医生 -->
      <view v-if="navIndex == 1">
        <view class="department-doctor-box">
          <!-- 分类列表 -->
          <view class="classify-list">
            <view
              v-for="item in classifyList"
              :key="item.id"
              class="classify-item"
              :class="{ active: item.id == classifySelected }"
              @click="handelClickClassify(item)"
              >{{ item.value }}</view
            >
          </view>

          <!-- 医生列表 -->
          <view
            v-if="doctorList.length > 0 && loading == false"
            class="doctor-list"
          >
            <view class="doctor-item" v-for="item in doctorList" :key="item.id">
              <DoctorItem :itemData="item" />
            </view>
          </view>
          <!-- 没有结果 -->
          <view class="loading-box flex1" v-if="doctorList.length == 0 || loading">
            <u-empty
              mode="search"
              icon="/static/images/Empty/nullData.png"
              v-if="doctorList.length == 0 && loading == false"
            >
            </u-empty>
            <u-loading-icon
              v-if="loading"
              text="加载中"
              textSize="18"
            ></u-loading-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { selectHospitalById, queryDoctorByDepartment } from "@/api";
import DoctorItem from "./components/doctorItem.vue";
export default {
  name: "HospitalDetail",

  components: { DoctorItem },
  data() {
    return {
      hospitalDetail: {},

      navList: [
        {
          name: "医院简介",
        },
        {
          name: "科室医生",
        },
      ],

      classifyList: [
        { id: 0, value: "外二科" },
        { id: 1, value: "皮肤科" },
        { id: 2, value: "ICU" },
        { id: 3, value: "外三科" },
        { id: 4, value: "外一科" },
        { id: 5, value: "五官科" },
        { id: 6, value: "肝肠科" },
        { id: 7, value: "内一科" },
        { id: 8, value: "耳鼻喉科" },
        { id: 9, value: "内二科" },
      ],

      // 选中的分类
      classifySelected: 0,

      // 医生列表
      doctorList: [],

      loading: false,

      navIndex: 0,

      baseUrl: "http://1.15.189.19:3000/public/img/",
    };
  },

  methods: {
    // 点击标签事件
    changeNav(navInfo) {
      this.navIndex = navInfo.index;
    },

    // 点击分类事件
    async handelClickClassify(classifyItem) {
      let { id, value } = classifyItem;
      this.classifySelected = id;
      // 发请求，获取医生列表
      this.loading = true;
      let result = await queryDoctorByDepartment(this.hospitalDetail.id, value);
      this.loading = false;
      this.doctorList = result.data;
    },
  },

  async mounted() {
    let id = this.$scope.options.id;
    // 获取数据
    let hospitalResult = await selectHospitalById(id);
    let doctorsResult = await queryDoctorByDepartment(
      this.hospitalDetail.id,
      "外二科"
    );
    this.hospitalDetail = hospitalResult.data[0];
    this.doctorList = doctorsResult.data;
  },
};
</script>

<style scoped lang='scss'>
.hospital-detail {
  .flex1 {
    flex: 1;
  }
  .container {
    .cover {
      width: 750rpx;
      height: 400rpx;
      overflow: hidden;
      img {
        width: 100%;
        object-fit: cover;
      }
    }

    .info-box {
      background: #fff;
      padding: 40rpx;
      justify-content: space-between;
      .hospital-name {
        font-size: 30rpx;
        font-weight: bold;
      }
      .hospital-grade {
        background: $themeColor1;
        padding: 5rpx 15rpx;
        color: #fff;
        border-radius: 10rpx;
        display: inline-block;
        margin-top: 20rpx;
      }
      .flex-box {
        display: flex;
        align-items: center;
        .hospital-info {
          background: #fff;
          font-size: 28rpx;
          > view {
            margin-top: 20rpx;
            .hint {
              margin-right: 10rpx;
            }
          }
        }
        .rate-box {
          margin-left: 20rpx;
          .rate-title {
            text-align: center;
            margin-bottom: 20rpx;
            font-size: 28rpx;
            color: #666;
          }
        }
      }
    }

    .hospital-introduce {
      font-size: 30rpx;
      text-indent: 1.5em;
      padding: 20rpx;
      line-height: 50rpx;
    }

    .department-doctor-box {
      margin-top: 20rpx;
      display: flex;
      .classify-list {
        .classify-item {
          padding: 20rpx 40rpx;
          border: 1rpx solid rgba(0, 0, 0, 0.1);
          &.active {
            background: $themeColor4;
            color: #fff;
          }
        }
      }

      .doctor-list {
        flex: 1;
        padding: 0 10rpx;
        .doctor-item {
          margin-bottom: 20rpx;
        }
      }
    }
  }
}
</style>